const qId=(x)=>document.getElementById(x);
const musicContainer=qId('music-container');
const playBtn=qId('play');
const prevBtn=qId('prev');
const nextBtn=qId('next');

const audio=qId('audio');
const progress=qId('progress');
const progressContainer=qId('progress-container');
const title=qId('title');
const cover=qId('cover');
const songs=["foo","foo2"]

let sonIndex=0;

loadSong(songs[sonIndex])
function loadSong(song){
    title.innerText=song;
    audio.src=`music/${song}.mp3`;
    cover.src=`image/${song}.jpg`;
}
playBtn.addEventListener('click',()=>{
    const isPaused=audio.paused;
    console.log(isPaused);
    if(isPaused){
        playBtn.classList.remove('fa-pause');
        playBtn.classList.add('fa-play');
        audio.play();
    }else{
        playBtn.classList.remove('fa-play');
        playBtn.classList.add('fa-pause');
        audio.pause();
    }
})
prevBtn.addEventListener('click',()=>{
    sonIndex--;
    if(sonIndex<0){
        sonIndex=songs.length-1;
    }
    loadSong(songs[sonIndex]);
    audio.play();
})
nextBtn.addEventListener('click',()=>{
    sonIndex++;
    if(sonIndex==songs.length){
        sonIndex=0;
    }
    loadSong(songs[sonIndex]);
    audio.play();
})
audio.addEventListener('timeupdate',()=>{
    const {currentTime,duration}=audio;
    const time=(currentTime/duration)*100;
    progress.style.width=`${time}%`;
    progressContainer.value=time;
    // console.log(time);
})
progressContainer.addEventListener('click',(e)=>{
    audio.pause();
    const width=progressContainer.clientWidth;
    const clickedPosition=e.offsetX;
    const newTime=(clickedPosition/width)*audio.duration;
    audio.currentTime=newTime;
    audio.play()
})
audio.addEventListener('ended',()=>{
    nextBtn.click();
})